<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        .box {
            position: relative;
            width: 400px;
            margin: 100px auto;
            border-bottom: 1px  solid pink;
        }
        .box input {
            
            width: 370px;
            height: 30px;
            outline: none;
            border: 0;
        }
        .box img {
            position: absolute;
            top: 8px;
            right: 10px;
            width: 20px;
            
        }
        .box label {
            
        }
        </style>
    </head>
    <body>
        <div class="box">
            <label>
                <img src="./pic/close.png" id='eye' >
            </label>
            <input type="password" id="mima" />
        </div>
        
        <script type="text/javascript">
           //获取元素
            var eye = document.getElementById('eye');
            var mima = document.getElementById('mima');
            //绑定事件
            var flag = 0;
            eye.onclick = function () {
                if ( flag == 0 ) {
                mima.type = 'text';
                eye.src='./pic/open.png';
                flag = 1;
            } else {
                mima.type = 'password';
                eye.src='./pic/close.png';
                flag = 0;
            }
        }
        </script>
    </body>
</html>
